import React, { useRef, useState } from 'react';
import './index.less';
import { Col, Row, Popover, Input, Popconfirm } from 'antd';
import { SettingOutlined, DatabaseOutlined } from '@ant-design/icons';
import { TextWidget, getMessage } from '@inbiz/react';

type Iprops = {
  dataSource: {
    Id: string;
    Name: string;
    Key: string;
  }[];
  active: string;
  onSelect: Function;
  del: Function;
  edit: Function;
};
function SelectListPc(props: Iprops) {
  const { dataSource, active } = props;
  // Popover面板显示隐藏
  const [showPopover, $showPopover] = useState(false);
  // 当前选中项是否是修改状态
  const [edit, $edit] = useState(false);

  const inputRef = useRef<any>(null);

  // 保存当前修改
  const saveItem = (name: string, id: string) => {
    $edit(false);
    props.edit && props.edit(id, name);
  };

  // 气泡框Dom
  const getContent = (item: any, index: number) => {
    return (
      <div className={'options-contant'}>
        <div
          onClick={(e) => {
            e.stopPropagation();
            $showPopover(false);
            $edit(true);
            setTimeout(() => {
              inputRef.current?.focus();
            }, 0);
          }}
        >
          <TextWidget>EformStaticList.tips.edit</TextWidget>
        </div>
        <Popconfirm
          placement="top"
          title={getMessage('EformStaticList.areYouSureYouWantToDelete')}
          okText={getMessage('EformStaticList.confirm')}
          cancelText={getMessage('EformStaticList.cancel')}
          onConfirm={(e) => {
            e?.stopPropagation();
            $showPopover(false);
            props.del(item.Key);
          }}
        >
          <div>getMessage('EformStaticList.delete')</div>
        </Popconfirm>
      </div>
    );
  };

  return (
    <div>
      {dataSource && dataSource.length > 0
        ? dataSource.map((item, index) => {
            return (
              <Row key={index}>
                <div
                  className="listItem"
                  onClick={() => {
                    props.onSelect && props.onSelect(item.Key);
                  }}
                  style={{
                    background: item.Key === active ? 'rgb(242,242,242)' : '#FFF',
                    color: item.Key === active ? 'var(--inbiz-color-primary)' : '#252525',
                  }}
                >
                  <Col span={2}>
                    <DatabaseOutlined />
                  </Col>
                  <Col span={20}>
                    {edit && item.Key === active ? (
                      <Input
                        defaultValue={item.Name}
                        ref={inputRef}
                        onBlur={(e) => {
                          saveItem(e.target.value, item.Key);
                          $edit(false);
                        }}
                        onPressEnter={(e) => {
                          let ipt = e.target as HTMLInputElement;
                          saveItem(ipt.value, item.Key);
                        }}
                      />
                    ) : (
                      <div className={'listItemName'} title={item.Name}>
                        {item.Name}
                      </div>
                    )}
                  </Col>
                  <Col span={2}>
                    <Popover
                      destroyTooltipOnHide={true}
                      content={getContent(item, index)}
                      placement={'bottom'}
                      trigger="click"
                      visible={item.Key === active && showPopover}
                      onVisibleChange={(visible) => {
                        !visible && $showPopover(false);
                      }}
                    >
                      <SettingOutlined
                        title="operation"
                        onClick={() => $showPopover(true)}
                        className={getMessage('EformStaticList.operation')}
                        style={{
                          color: 'rgb(24,144,255)',
                          display: item.Key === active ? 'block' : 'none',
                        }}
                      />
                    </Popover>
                  </Col>
                </div>
              </Row>
            );
          })
        : ''}
    </div>
  );
}
export default SelectListPc;
